<template>
  <el-card class="box-card header-dark m-t-20">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-arrows m-r-10 text-c-green" aria-hidden="true"></i>
      <span>移动遥控</span>
    </div>
    <!-- 手动遥控记录 -->
    <div class="flex-row-center">
      <span>是否开启手动遥控记录？</span>
      <div class="btn-switch" id="btn-keepFile">
        <input type="checkbox" class="keepFile-check" :checked="recordAble" :disabled="!telecontrol"
          @click="recodeSwitch($event)" />
        <div class="knobs"></div>
        <div class="layer"></div>
      </div>
    </div>
    <!-- 移动按钮 -->
    <div class="text-center m-t-20">
      <div class="flex-col-center">
        <el-button type="button" class="f-large" @mousedown.native="handleMove($event, 'up')"
          @mouseup.native="handleMove($event, 'stop')" :disabled="!telecontrol">
          <i class="fa fa-caret-up" aria-hidden="true"></i>
        </el-button>
      </div>
      <div class="flex-row-center m-t-10">
        <el-button type="button" class="f-large" @mousedown.native="handleMove($event, 'left')"
          @mouseup.native="handleMove($event, 'stop')" :disabled="!telecontrol">
          <i class="fa fa-caret-left" aria-hidden="true"></i>
        </el-button>
        <el-button type="button" class="f-large" @mousedown.native="handleMove($event, 'down')"
          @mouseup.native="handleMove($event, 'stop')" :disabled="!telecontrol">
          <i class="fa fa-caret-down" aria-hidden="true"></i>
        </el-button>
        <el-button type="button" class="f-large" @mousedown.native="handleMove($event, 'right')"
          @mouseup.native="handleMove($event, 'stop')" :disabled="!telecontrol">
          <i class="fa fa-caret-right" aria-hidden="true"></i>
        </el-button>
      </div>
    </div>
    <!-- 取水按钮 -->
    <div class="m-t-20 p-x-15 flex-row-around">
      <div class="toGetWater" @click="toGetWater" ref="getWaterBtn">
        <span class="f-large" :style="'color:' + btnTextColor">{{
          waterBtnText
        }}</span>
        <div class="loadingBox1" ref="loadingBox1"></div>
        <div class="loadingBox2" ref="loadingBox2"></div>
        <div id="waterIndex" class="f-w-600 text-center">1</div>
      </div>
      <div class="flex-row-around">
        <el-slider v-model="deepValue" :step="5" vertical height="100px" show-stops :min="-15" :max="0">
        </el-slider>
        <div class="flex-col-around">
          <el-button size="mini" round plain type="info" @click="AdjustDepth(1)"><i class="fa fa-long-arrow-up"
              aria-hidden="true"></i></el-button><br>
          <el-button size="mini" round plain type="info" @click="AdjustDepth(0)"><i class="fa fa-long-arrow-down"
              aria-hidden="true"></i></el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { openTheRecord, moveTheShip, getWaterQuality, depthControl } from "@/api/cruiseMange";
import { mapState } from "vuex";
export default {
  name: "Move",
  data() {
    return {
      deepValue: 0,
      telecontrol: false, //表示当前是否为手动遥控模式
      waterInterId: null, //取水的定时器
      waterTime: 28,
      waterBtnText: "取水",
      btnTextColor: "#10a2d7",
    };
  },
  methods: {
    // 切换记录开启状况
    recodeSwitch(e) {
      let check = e.target.checked ? 1 : 0;
      let text = e.target.checked
        ? "图像记录已开启,您可以在计划管理和监控管理中查看巡航过程中保存的图像。"
        : "图像记录已关闭";
      openTheRecord(check)
        .then(() => {
          this.$alert(text, "操作提示", {
            confirmButtonText: "了解",
          });
        })
        .catch((err) => {
          this.$Notify('记录开启失败！', 'error');
        });
    },
    // 无人船移动遥控
    handleMove(e, order) {
      e.stopPropagation();
      moveTheShip(order).then(() => {
        console.log("移动方式：" + order);
      });
    },
    // 深度调节
    AdjustDepth(n) {
      if (this.deepValue === 0 && n) return;
      if (this.deepValue === (-15) && !n) return;
      // 发送请求，请求成功后才进行数据修改
      depthControl(n).then(() => {
        this.deepValue += n ? 5 : -5;
      }).catch(err => {
        console.log(err);
      })
    },
    // 取水按钮
    toGetWater() {
      if (!this.telecontrol) return;
      console.log("开始取水");
      this.recoverWaterBtn(); //调用取水按钮的动画复原
      const sec = this.waterTime; //设定了取水动画的时间
      const lb1 = this.$refs.loadingBox1;
      const lb2 = this.$refs.loadingBox2;
      const btn = this.$refs.getWaterBtn;
      // 开始取水，两个边框动态的大圆球从下方缓慢移动到上方↓
      setTimeout(() => {
        //这里使用setTimeout变成异步处理，就能保证按钮复原之后再进行动画
        lb1.style["bottom"] = "103px"; //定位改变
        lb1.style["transitionDuration"] = `${sec}s`; //持续时间
        lb2.style["bottom"] = "93px";
        lb2.style["transitionDuration"] = `${sec}s`;
        this.waterBtnText = "取水中..."; //文字修改
        getWaterQuality()
          .then(() => {
            console.log("取水按钮请求成功");
          })
          .catch((err) => {
            console.log("取水按钮请求失败");
            console.log(err);
          });
      }, 0);
      // 同时开启定时器
      this.waterInterId = setTimeout(() => {
        this.waterBtnText = "取水完毕"; //文字修改
        this.btnTextColor = "#fff"; //文字修改颜色
        btn.style["animation"] = "overScale 0.3s infinite"; //按钮变大
        btn.style["animation-iteration-count"] = "1"; //定义动画播放一次
        btn.style["animation-direction"] = "reverse"; //动画复原，也就是按钮变小
      }, sec * 1000); //时间是动画结束之后
    },
    // 取水动画复原
    recoverWaterBtn() {
      clearInterval(this.waterInterId);
      let lb1 = this.$refs.loadingBox1;
      let lb2 = this.$refs.loadingBox2;
      lb1.style["bottom"] = "-5px"; //定位改变
      lb1.style["transitionDuration"] = `0s`; //持续时间
      lb2.style["bottom"] = "-15px";
      lb2.style["transitionDuration"] = `0s`;
      this.waterBtnText = "取水"; //文字复原
      this.btnTextColor = "#10a2d7"; //文字颜色复原
    },

  },
  computed: {
    ...mapState("cruiseManage", ["recordAble"]),
  },
  watch: {
    // 监听当前的模式，控制按钮是否有效与取水动画是否停止
    "$store.state.cruiseManage.shipState"(newVal, oldVal) {
      this.telecontrol = newVal == "手动遥控" ? true : false;
      if (!this.telecontrol) this.recoverWaterBtn();
    },
  },
};
</script>

<style lang="less">
.btn-switch {
  position: relative;
  top: 50%;
  display: inline-block;
  width: 74px;
  height: 36px;

  .knobs,
  .layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100px;
  }

  .knobs {
    z-index: 2;
  }

  .layer {
    width: 100%;
    background-color: #3f4d67;
    transition: 0.3s ease all;
    z-index: 1;
  }
}

.keepFile-check {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

#btn-keepFile .knobs:before {
  content: "关";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  color: #3f4d67;
  background-color: #f4f4f4;
  border-radius: 50%;
  box-sizing: content-box;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

#btn-keepFile .keepFile-check:active+.knobs:before {
  width: 46px;
  border-radius: 100px;
}

#btn-keepFile .keepFile-check:checked:active+.knobs:before {
  margin-left: -26px;
}

#btn-keepFile .keepFile-check:checked+.knobs:before {
  content: "开";
  left: 42px;
  color: #fff;
  background-color: #1de9b6;
}

#btn-keepFile .keepFile-check:checked~.layer {
  background-color: #3f4d67;
}

#waterIndex {
  position: relative;
  top: 60px;
  z-index: 999;
}

.toGetWater {
  position: relative;
  width: 94px;
  height: 94px;
  border-radius: 50px;
  border: 3px solid #10a2d7;
  background-color: #76daff;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.toGetWaterBtn {
  border: 3px solid #525252 !important;
  background-color: #ccc !important;
}

.toGetWater:hover {
  box-shadow: 0 2px 6px 1px rgba(42, 172, 241, 0.8);
}

.toGetWater>span {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-weight: 700;
  transform: translate(-50%, -50%);
  transition: all 0.3s linear;
}

.loadingBox1,
.loadingBox2 {
  position: absolute;
  left: 50%;
  min-width: 250px;
  min-height: 250px;
  border-radius: 150px;
  background-color: #fff;
  transition: all 24s linear;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.loadingBox1 {
  bottom: -5px;
  border-radius: 45%;
  animation-duration: 5s;
}

.loadingBox2 {
  bottom: -15px;
  opacity: 0.5;
  border-radius: 47%;
  animation-duration: 5s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }

  50% {
    transform: translate(-50%, -2%) rotateZ(180deg);
  }

  100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
  }
}

@keyframes overScale {
  form {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}
</style>